<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style></style>

<body style="background-color: #000">
    <div style="
        color: orange;
        margin: 0 auto;
        width: px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        font-weight: 1000;
        font-size: 70px;
      ">
        数组的扩展
    </div>
    <script>
        /* 扩展运算符
          Array.from()
          Array.of()
          数组实例的 copyWithin()
          数组实例的 find() 和 findIndex()
          数组实例的 fill()
          数组实例的 entries()，keys() 和 values()
          数组实例的 includes()点多
          数组实例的 flat()，flatMap()
          数组的空位
          Array.from() 对对对
          Array.prototype.sort() 的排序稳定性
           */
        // ES6 数组拼接的写法——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

        let arr1 = [0, 1, 2];
        let arr2 = [3, 4, 5];
        let arr4 = [7, 7, 7, 7, 7];
        arr1.push(...arr2);

        // ES6 数组克隆——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————-

        let arr3 = [1, 2, 3, 4, 5];
        let arr33 = [...arr3];
        arr33[0] = 10;
        console.log(...arr3, ...arr33);
        // ES6 合并数组——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        let arrAdd = [...arr3, ...arr33];
        /* es5 concat() 方法*/
        let es5Add = arr4.concat(...arr2, ...arr3); //(arr2, arr3)
        console.log(es5Add, "es5合并");
        console.log(arrAdd, "合并数组");
        //!!!!!!!!!!!!!!!!!以上两种方法属于浅拷贝

        // ES6 合并字符转转真数组——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        let str = "hellow";
        console.log([...str]); //等同
        console.log([..."hellow"]);
        // ES6 Array.from()转真数组—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        // Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。
        let arrayLike = {
            0: "a",
            1: "b",
            2: "c",
            length: 3,
        };

        // ES6的写法
        let arr22 = Array.from(arrayLike); // ['a', 'b', 'c']
        console.log(arr22); //['a', 'b', 'c']
        //arrayfrom()第二个参数类似map
        let a = [1, 2, 3, 4, 5, 6];
        let b = Array.from(a, (v) => v * 8);
        console.log(b, a); //原来数组不变
        console.log(Array.from(str)); //拆分Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度
        //Array.of()方法用于将一组值，转换为数——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        Array.of(2, 3, 4, 5, 6); //[2,3,4,5,6]
        console.log(Array.of(2, 3, 4, 5, 6).map((v) => v * v));

        //数组实例的 copyWithin() 数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————，转换为数——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        /* target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
          start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
         end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
         这三个参数都应该是数值，如果不是，会自动转为数值。 */
        [1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]

        // 上面代码表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2。
        let bb = [2, 3, 4, 5, 6, 7, 8, 9, 0]
        console.log(bb.copyWithin(2, 6));//(9) [2, 3, 8, 9, 0, 7, 8, 9, 0]
        //——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        //数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
        let fin = [1, 4, -5, 10]
        let fins = fin.find((n) => n < 0)
        console.log(fins);//-5返回条件符合的值
        let ffff = fin.filter((v, i, f) => v < 0)//返回的是新的数组
        console.log(ffff);
        //数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        let indexx = [1, 2, 4, 6, 7, 8]
        console.log(indexx.findIndex((v) => v > 1));//1组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组
        //上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。。。——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        let cc = [1, 2, 3]
        console.log(cc.fill(520, 1, 2));//(3) [1, 520, 3]
        //ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

        let objs = [1, 2, 4, 5, 6]
        for (const keyss of objs.keys()) {
            console.log(keyss);//获取建明0,1,2,3,4
        }
        for (const k of objs.values()) {
            console.log(k);//1,2,3,4,5,6获取的是值
        }
        for (const aa of objs.entries()) {
            console.log(aa);//获取键值对
        }
        // ES6 flat（）数组多维变一维数组——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        console.log([1, 2, [3, [4, 5]]].flat(2));//(5) [1, 2, 3, 4, 5]
        console.log([1, 2, [3, [4, 5]]].flat(Infinity));//(5) [1, 2, 3, 4, 5]
        // ES6 splice（）替换数组删除改变原数组——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        let news = [7, 2, 9, 9]
        let ssss = objs.splice(0, 2, ...news)
        console.log(objs);//(7) [1, 2, 9, 9, 4, 5, 6]
    </script>
</body>

</html>